<template>
  <view class="purchase-button-container">
    <view class="purchase-button" @click="handleClick">
      <text class="purchase-text">{{ text }}</text>
    </view>
    <view class="purchase-desc" v-if="description">
      <text class="desc-text">{{ description }}</text>
    </view>
  </view>
</template>

<script>
export default {
  name: 'PurchaseButton',
  props: {
    text: {
      type: String,
      default: '立即购买 免费安装'
    },
    description: {
      type: String,
      default: '每个小区仅限申请 20 台 · 每位车主限购一台'
    },
    fixed: {
      type: Boolean,
      default: true
    }
  },
  methods: {
    handleClick() {
      this.$emit('click');
    }
  }
}
</script>

<style scoped>
.purchase-button-container {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: rgba(255, 255, 255, 1);
  padding: 12px 15px 20px;
  z-index: 100;
}

.purchase-button {
  background-color: rgba(28, 204, 180, 1);
  border-radius: 30px;
  padding: 12px 54px 11px 56px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.purchase-text {
  overflow-wrap: break-word;
  color: rgba(255, 255, 255, 1);
  font-size: 18px;
  font-family: PingFangSC-Medium;
  font-weight: 500;
  text-align: center;
  white-space: nowrap;
  line-height: 25px;
}

.purchase-desc {
  background-color: rgba(239, 239, 239, 1);
  height: 28px;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 8px;
}

.desc-text {
  overflow-wrap: break-word;
  color: rgba(153, 153, 153, 1);
  font-size: 12px;
  font-family: PingFangSC-Regular;
  font-weight: 400;
  text-align: center;
  white-space: nowrap;
  line-height: 17px;
}
</style>